<template>
  <el-container style="min-height: 100vh">
    <el-aside :width="sideWidth"
              style="background-color: rgb(238, 241, 246);box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);">
      <Aside :is-collapse="isCollapse" :has-logo-text-show="hasLogoTextShow" />
    </el-aside>

    <el-container style=" height:100vh;overflow-x:hidden">
      <el-header style=" border-bottom: 1px solid #ccc">
        <Header :collapse-btnclass="collapseBtnclass" :user="user"  style="y-index:1"/>
      </el-header>
      <tags-view :is-collapse="isCollapse" v-if="isTagsViews"/>
      <el-scrollbar style="height: 100vh;background-color: #f8f8ff" :native=false wrapStyle="overflow-x:hidden;" wrapClass="" viewClass="" viewStyle="" :noresize=false tag="section" >
      <el-main style="padding-top: 10px">
        <transition name="el-fade-in-linear">
        <router-view @refreshUser="getUser"/>
        </transition>
     </el-main>
      </el-scrollbar>
    </el-container>

  </el-container>

</template>

<script>
// @ is an alias to /src
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";
import TagsView from "@/components/TagsView.vue";
import {getUser} from "@/api/user";
export default {
  name: 'HomeView',
  components: {
   Aside, Header,TagsView
  },
  data() {

    return {
      isTagsViews: localStorage.getItem('configuration')?JSON.parse(localStorage.getItem('configuration')).isTagsViews:true,
      tableData: [],
      collapseBtnclass: "el-icon-s-fold",
      isCollapse: false,
      sideWidth: "200px",
      hasLogoTextShow: true,
      user:{},
      headerBg: "headerBg"
    }
  },
  created() {
    this.getUser();
  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.sideWidth = "64px";
        this.collapseBtnclass = "el-icon-s-unfold";
        this.hasLogoTextShow = false;
      } else {
        this.sideWidth = "200px";
        this.collapseBtnclass = "el-icon-s-fold";
        this.hasLogoTextShow = true;
      }
    },
    getUser(){
      let userName=localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).userName :"";
      if(userName) {
       getUser(userName).then(res => {
          this.user = res.data;
        })
      }
    }
  },

}
</script>
<style >

</style>
